<template>
  <div class="error-404">
    <div class='error-banner'>
      <svg xmlns="http://www.w3.org/2000/svg" width="312">
        <g id="group-1-cube-1">
          <path fill="#1D2125" d="M210.6 0l-20 11.2v22.4l20 11.2 20-11.2V11.2L210.6 0z"/>
          <path fill="#DADEDE" d="M210.6 5.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-1-cube-2">
          <path fill="#1D2125" d="M170.6 22.4l-20 11.2V56l20 11.2 20-11.2V33.6l-20-11.2z"/>
          <path fill="#DADEDE" d="M170.6 27.7l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-1-cube-3">
          <path fill="#1D2125" d="M230.6 11.2l-20 11.2v22.4l20 11.2 20-11.2V22.4l-20-11.2z"/>
          <path fill="#DADEDE" d="M230.6 16.5L215.3 25l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-1-cube-4">
          <path fill="#1D2125" d="M250.6 22.4l-20 11.2V56l20 11.2 20-11.2V33.6l-20-11.2z"/>
          <path fill="#DADEDE" d="M250.6 27.7l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-1-cube-5">
          <path fill="#1D2125" d="M190.6 33.6l-20 11.2v22.4l20 11.2 20-11.2V44.8l-20-11.2z"/>
          <path fill="#DADEDE" d="M190.6 38.9l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-1-cube-6">
          <path fill="#1D2125" d="M230.6 33.6l-20 11.2v22.4l20 11.2 20-11.2V44.8l-20-11.2z"/>
          <path fill="#DADEDE" d="M230.6 38.9l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-1-cube-7">
          <path fill="#1D2125" d="M210.6 44.8l-20 11.2v22.4l20 11.2 20-11.2V56l-20-11.2z"/>
          <path fill="#DADEDE" d="M210.6 50.1l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-1-cube-8">
          <path fill="#1D2125" d="M270.6 33.6l-20 11.2v22.4l20 11.2 20-11.2V44.8l-20-11.2z"/>
          <path fill="#DADEDE" d="M270.6 38.9l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-1-cube-9">
          <path fill="#1D2125" d="M290.6 44.8l-20 11.2v22.4l20 11.2 20-11.2V56l-20-11.2z"/>
          <path fill="#DADEDE" d="M290.6 50.1l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-1">
          <path fill="#1D2125" d="M135.3 42.2l-20 11.2v22.4l20 11.2 20-11.2V53.4l-20-11.2z"/>
          <path fill="#DADEDE" d="M135.3 47.5L120 56l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-2">
          <path fill="#1D2125" d="M115.3 53.4l-20 11.2V87l20 11.2 20-11.2V64.6l-20-11.2z"/>
          <path fill="#DADEDE" d="M115.3 58.7L100 67.2l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-3">
          <path fill="#1D2125" d="M95.3 64.6l-20 11.2v22.4l20 11.2 20-11.2V75.8l-20-11.2z"/>
          <path fill="#DADEDE" d="M95.3 69.9L80 78.4 95.3 87l15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-4">
          <path fill="#1D2125" d="M155.3 53.4l-20 11.2V87l20 11.2 20-11.2V64.6l-20-11.2z"/>
          <path fill="#DADEDE" d="M155.3 58.7L140 67.2l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-5">
          <path fill="#1D2125" d="M175.3 64.6l-20 11.2v22.4l20 11.2 20-11.2V75.8l-20-11.2z"/>
          <path fill="#DADEDE" d="M175.3 69.9L160 78.4l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-6">
          <path fill="#1D2125" d="M115.3 75.8L95.3 87v22.4l20 11.2 20-11.2V87l-20-11.2z"/>
          <path fill="#DADEDE" d="M115.3 81.1L100 89.6l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-7">
          <path fill="#1D2125" d="M135.3 87l-20 11.2v22.4l20 11.2 20-11.2V98.2l-20-11.2z"/>
          <path fill="#DADEDE" d="M135.3 92.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-8">
          <path fill="#1D2125" d="M155.3 98.2l-20 11.2v22.4l20 11.2 20-11.2v-22.4l-20-11.2z"/>
          <path fill="#DADEDE" d="M155.3 103.5L140 112l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-9">
          <path fill="#1D2125" d="M195.3 75.8l-20 11.2v22.4l20 11.2 20-11.2V87l-20-11.2z"/>
          <path fill="#DADEDE" d="M195.3 81.1L180 89.6l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-10">
          <path fill="#1D2125" d="M215.3 87l-20 11.2v22.4l20 11.2 20-11.2V98.2l-20-11.2z"/>
          <path fill="#DADEDE" d="M215.3 92.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-11">
          <path fill="#1D2125" d="M195.3 98.2l-20 11.2v22.4l20 11.2 20-11.2v-22.4l-20-11.2z"/>
          <path fill="#DADEDE" d="M195.3 103.5L180 112l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-2-cube-12">
          <path fill="#1D2125" d="M175.3 109.4l-20 11.2V143l20 11.2 20-11.2v-22.4l-20-11.2z"/>
          <path fill="#DADEDE" d="M175.3 114.7l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-3-cube-1">
          <path fill="#1D2125" d="M60 84.4L40 95.6V118l20 11.2L80 118V95.6L60 84.4z"/>
          <path fill="#DADEDE" d="M60 89.7l-15.3 8.5 15.3 8.6 15.3-8.6L60 89.7"/>
        </g>
        <g id="group-3-cube-2">
          <path fill="#1D2125" d="M20 106.8L0 118v22.4l20 11.2 20-11.2V118l-20-11.2z"/>
          <path fill="#DADEDE" d="M20 112.1l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-3-cube-3">
          <path fill="#1D2125" d="M80 95.6l-20 11.2v22.4l20 11.2 20-11.2v-22.4L80 95.6z"/>
          <path fill="#DADEDE" d="M80 100.9l-15.3 8.5L80 118l15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-3-cube-4">
          <path fill="#1D2125" d="M100 106.8L80 118v22.4l20 11.2 20-11.2V118l-20-11.2z"/>
          <path fill="#DADEDE" d="M100 112.1l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-3-cube-5">
          <path fill="#1D2125" d="M40 118l-20 11.2v22.4l20 11.2 20-11.2v-22.4L40 118z"/>
          <path fill="#DADEDE" d="M40 123.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-3-cube-6">
          <path fill="#1D2125" d="M80 118l-20 11.2v22.4l20 11.2 20-11.2v-22.4L80 118z"/>
          <path fill="#DADEDE" d="M80 123.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-3-cube-7">
          <path fill="#1D2125" d="M60 129.2l-20 11.2v22.4L60 174l20-11.2v-22.4l-20-11.2z"/>
          <path fill="#DADEDE" d="M60 134.5L44.7 143l15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-3-cube-8">
          <path fill="#1D2125" d="M120 118l-20 11.2v22.4l20 11.2 20-11.2v-22.4L120 118z"/>
          <path fill="#DADEDE" d="M120 123.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
        <g id="group-3-cube-9">
          <path fill="#1D2125" d="M140 129.2l-20 11.2v22.4l20 11.2 20-11.2v-22.4l-20-11.2z"/>
          <path fill="#DADEDE" d="M140 134.5l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"/>
        </g>
      </svg>
      <div class='error-message'>
        <h2>Not Found.404</h2>
        <p><span>This page doesn't exist.</span></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted } from 'vue'

onMounted(() => {
  nextTick(() => {
    window.scrollTo(0, 0)
  })
})


</script>

<style scoped>
.error-404 {
  background: #262b30;
  height: 70vh;
  overflow: visible;
  width: 100%;
}

.error-404 {
  overflow: visible;
  text-align: center;
}

.error-banner {
  padding: 60px 0 20px;
  position: relative;
  display: inline-block;
  font-family: Helvetica-neue, Helvetica, Arial, sans-serif;
  color: #788392;
}

.error-banner svg {
  position: relative;
  overflow: visible;
  z-index: 2;
  transform: translate3d(0, 0, 0);
  margin: 3em;
}

.error-banner .error-message {
  margin: 1em 0;
  position: relative;
}

.error-banner h2 {
  font-size: 50px;
  font-weight: normal;
  margin: 0;
  animation: 1.5s ease-out fade-in-slowly;
}

.error-banner p {
  font-size: 20px;
  margin: 8px;
}

.error-banner p span {
  animation: 2s ease-out fade-in-slowly;
}

.error-banner svg:hover + .error-message {
  animation: error-party 0.9s linear infinite;
}

.error-banner svg:hover + .error-message h2 {
  font-size: 0;
}

.error-banner svg:hover + .error-message h2:before {
  font-size: 20px;
  content: "On the bright side, you found";
}

.error-banner svg:hover + .error-message p {
  font-size: 0;
}

.error-banner svg:hover + .error-message p:after {
  font-size: 50px;
  line-height: 1.2em;
  content: "WELCOME TO THE BLOG!";
}

.error-banner svg:hover + .error-message p {
  animation: zbounce 0.5s linear infinite;
}

[id$=cube-1], [id$=cube-13], [id$=cube-25] {
  animation: drop-cube-1 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-1] path, [id$=cube-13] path, [id$=cube-25] path {
  animation: fade-cube-1 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-2], [id$=cube-14], [id$=cube-26] {
  animation: drop-cube-2 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-2] path, [id$=cube-14] path, [id$=cube-26] path {
  animation: fade-cube-2 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-3], [id$=cube-15], [id$=cube-27] {
  animation: drop-cube-3 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-3] path, [id$=cube-15] path, [id$=cube-27] path {
  animation: fade-cube-3 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-4], [id$=cube-16], [id$=cube-28] {
  animation: drop-cube-4 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-4] path, [id$=cube-16] path, [id$=cube-28] path {
  animation: fade-cube-4 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-5], [id$=cube-17], [id$=cube-29] {
  animation: drop-cube-5 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-5] path, [id$=cube-17] path, [id$=cube-29] path {
  animation: fade-cube-5 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-6], [id$=cube-18], [id$=cube-30] {
  animation: drop-cube-6 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-6] path, [id$=cube-18] path, [id$=cube-30] path {
  animation: fade-cube-6 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-7], [id$=cube-19], [id$=cube-31] {
  animation: drop-cube-7 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-7] path, [id$=cube-19] path, [id$=cube-31] path {
  animation: fade-cube-7 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-8], [id$=cube-20], [id$=cube-32] {
  animation: drop-cube-8 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-8] path, [id$=cube-20] path, [id$=cube-32] path {
  animation: fade-cube-8 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-9], [id$=cube-21], [id$=cube-33] {
  animation: drop-cube-9 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-9] path, [id$=cube-21] path, [id$=cube-33] path {
  animation: fade-cube-9 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-10], [id$=cube-22], [id$=cube-34] {
  animation: drop-cube-10 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-10] path, [id$=cube-22] path, [id$=cube-34] path {
  animation: fade-cube-10 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-11], [id$=cube-23], [id$=cube-35] {
  animation: drop-cube-11 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-11] path, [id$=cube-23] path, [id$=cube-35] path {
  animation: fade-cube-11 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-12], [id$=cube-24], [id$=cube-36] {
  animation: drop-cube-12 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

[id$=cube-12] path, [id$=cube-24] path, [id$=cube-36] path {
  animation: fade-cube-12 0.9s cubic-bezier(0.19, 1, 0.32, 1);
}

svg:hover [id$=cube-1] path, svg:hover [id$=cube-13] path, svg:hover [id$=cube-25] path {
  animation: fade-out-cube-1 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-2] path, svg:hover [id$=cube-14] path, svg:hover [id$=cube-26] path {
  animation: fade-out-cube-2 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-3] path, svg:hover [id$=cube-15] path, svg:hover [id$=cube-27] path {
  animation: fade-out-cube-3 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-4] path, svg:hover [id$=cube-16] path, svg:hover [id$=cube-28] path {
  animation: fade-out-cube-4 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-5] path, svg:hover [id$=cube-17] path, svg:hover [id$=cube-29] path {
  animation: fade-out-cube-5 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-6] path, svg:hover [id$=cube-18] path, svg:hover [id$=cube-30] path {
  animation: fade-out-cube-6 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-7] path, svg:hover [id$=cube-19] path, svg:hover [id$=cube-31] path {
  animation: fade-out-cube-7 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-8] path, svg:hover [id$=cube-20] path, svg:hover [id$=cube-32] path {
  animation: fade-out-cube-8 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-9] path, svg:hover [id$=cube-21] path, svg:hover [id$=cube-33] path {
  animation: fade-out-cube-9 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-10] path, svg:hover [id$=cube-22] path, svg:hover [id$=cube-34] path {
  animation: fade-out-cube-10 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-11] path, svg:hover [id$=cube-23] path, svg:hover [id$=cube-35] path {
  animation: fade-out-cube-11 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

svg:hover [id$=cube-12] path, svg:hover [id$=cube-24] path, svg:hover [id$=cube-36] path {
  animation: fade-out-cube-12 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
}

@keyframes drop-cube-1 {
  0%, 7% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-1 {
  0%, 7% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-1 {
  0%, 3% {
    opacity: 1;
  }
  97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-2 {
  0%, 14% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-2 {
  0%, 14% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-2 {
  0%, 6% {
    opacity: 1;
  }
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-3 {
  0%, 21% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-3 {
  0%, 21% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-3 {
  0%, 9% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-4 {
  0%, 28% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-4 {
  0%, 28% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-4 {
  0%, 12% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-5 {
  0%, 35% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-5 {
  0%, 35% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-5 {
  0%, 15% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-6 {
  0%, 42% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-6 {
  0%, 42% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-6 {
  0%, 18% {
    opacity: 1;
  }
  82% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-7 {
  0%, 49% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-7 {
  0%, 49% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-7 {
  0%, 21% {
    opacity: 1;
  }
  79% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-8 {
  0%, 56% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-8 {
  0%, 56% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-8 {
  0%, 24% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-9 {
  0%, 63% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-9 {
  0%, 63% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-9 {
  0%, 27% {
    opacity: 1;
  }
  73% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-10 {
  0%, 70% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-10 {
  0%, 70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-10 {
  0%, 30% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-11 {
  0%, 77% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-11 {
  0%, 77% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-11 {
  0%, 33% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop-cube-12 {
  0%, 84% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-cube-12 {
  0%, 84% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-cube-12 {
  0%, 36% {
    opacity: 1;
  }
  64% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes error-party {
  0% {
    color: #8e55dd;
  }
  20% {
    color: #967adc;
  }
  40% {
    color: #fef0bd;
  }
  60% {
    color: #d4eef7;
  }
  80% {
    color: #82c1ed;
  }
  100% {
    color: #5d9cec;
  }
}

@keyframes fade-in-slowly {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zbounce {
  0%, 100% {
    transform: scale(0.95, 0.95);
  }
  50% {
    transform: scale(1, 1);
  }
}
</style>
